<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:1000px;margin:auto;">
        <el-form
          ref="form"
          :model="form"
          :rules="form.houseType==0?rulesPesonal:rules"
          class="table-form"

          size="small"
        >
          <table class="table table-bordered th-bg">
            <tbody>
            <tr>
              <th width="15%">重点项目年份</th>
              <td width="35%">
                <el-form-item prop="year">
                  <el-date-picker 
                    v-model="form.year" 
                    clearable size="small" 
                    type="year" 
                    placeholder="请选择重点项目年份" 
                    value-format="yyyy" 
                  >
                  </el-date-picker>
                </el-form-item>
              </td>
              <th width="15%">重点项目名称</th>
              <td width="35%">
                <el-form-item prop="name">
                  <el-input v-model="form.name"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="200">立项信息</th>
              <td colspan=3>
                <el-form-item prop="information" class="editor">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="form.information">
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">土地状况</th>
              <td width="35%">
                <el-form-item prop="landStatus">
                  <el-select
                    v-model="form.landStatus"
                    clearable
                    size="small"
                    placeholder="土地状况"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in landStatusList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />    
                  </el-select>
                </el-form-item>
              </td>
              <th width="15%">累计纳统投资额（万元）</th>
              <td width="35%">
                <el-form-item prop="cumulativeInvestment">
                  <el-input v-model="form.cumulativeInvestment"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">计划投资总额（万元）</th>
              <td width="35%">
                <el-form-item prop="plannedInvestment">
                  <el-input v-model="form.plannedInvestment"/>
                </el-form-item>
              </td>
              <th width="15%">所处阶段</th>
              <td width="35%">
                <el-form-item prop="stage">
                  <el-select
                    v-model="form.stage"
                    clearable
                    size="small"
                    placeholder="所处阶段"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in stageList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />    
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">用地面积（亩）</th>
              <td width="35%">
                <el-form-item prop="landArea">
                  <el-input v-model="form.landArea"/>
                </el-form-item>
              </td>
              <th width="15%">重点项目分类</th>
              <td width="35%">
                <el-form-item prop="category">
                  <el-select
                    v-model="form.category"
                    clearable
                    size="small"
                    placeholder="重点项目分类"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in categoryList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />    
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">企业产值（万元）</th>
              <td width="35%">
                <el-form-item prop="outputValue">
                  <el-input v-model="form.outputValue"/>
                </el-form-item>
              </td>
              <th width="15%">企业税收（万元）</th>
              <td width="35%">
                <el-form-item prop="taxation">
                  <el-input v-model="form.taxation"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">重点项目等级</th>
              <td width="35%">
                <el-form-item prop="level">
                  <el-select
                    v-model="form.level"
                    clearable
                    size="small"
                    placeholder="重点项目等级"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in levelList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />    
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            </tbody>
          </table>
          <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
            <el-button
              :loading="loading"
              type="primary"
              size="small"
              @click="submitForm"
            >
              {{isEdit ? '更新政策' : '新增政策'}} 
            </el-button>            
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import crudProject from '@/api/business/project'
import { MessageBox } from 'element-ui'
import { landStatusList, stageList, categoryList, levelList } from '@/utils/index.js'
const defaultForm = {
  
}

export default {
  components: {
  },
  computed: {
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      landStatusList,
      stageList,
      categoryList,
      levelList,
      form: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        year: [
          {
            required: true,
            message: '请输入重点项目年份'
          }
        ],
        stage: [
          {
            required: true,
            message: '请选择所处阶段'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入重点项目名称'
          }
        ],
        information: [
          {
            required: true,
            message: '请输入立项信息'
          }
        ],
        landStatus: [
          {
            required: true,
            message: '请选择土地状况'
          }
        ],
        cumulativeInvestment: [
          {
            required: true,
            message: '请输入累计纳统投资额（万元）'
          }
        ],
        plannedInvestment: [
          {
            required: true,
            message: '请输入累计纳统投资额（万元）'
          }
        ],
        landArea: [
          {
            required: true,
            message: '请输入用地面积（亩）'
          }
        ],
        category: [
          {
            required: true,
            message: '请选择重点项目分类'
          }
        ],
        outputValue: [
          {
            required: true,
            message: '请输入企业产值（万元）'
          }
        ],
        taxation: [
          {
            required: true,
            message: '企业税收（万元)'
          }
        ],
        level:[
          {
            required: true,
            message: '重点项目等级'
          }
        ]
      },  
      loading: false,
      id: null,
    }
  },

  created() {
    if (this.isEdit) {
      this.id = this.$route.params && this.$route.params.id
      this.fetchData(this.id)
    }else {
    }
  },
  computed: {
    
  },
  methods: {
    fetchData(id) {
      crudProject.get(id).then(response => {
        this.form = Object.assign({}, this.form, response.data)
    
        // if (response.data.fireFileList) {
        //   for (let i = 0; i < response.data.fireFileList.length; i++) {
        //     const item = response.data.fireFileList[i]
        //     const file = {
        //       fileId: item.fileId,
        //       name: item.fileName,
        //       url: `business/file/download?fileId=${item.fileId}`
        //     }
        //     this.fireFileList.push(file)
        //   }
        //   this.form.fireFileIdList = this.fireFileList.map(x => x.fileId)
        // }
       
      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/project')
    },

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        MessageBox.confirm('您确认执行此操作吗？', '确认操作', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          if (this.isEdit) {
            crudProject.edit(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '修改信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            crudProject.add(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '提交信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch((e) => {
          console.log(e)
        });
      })
    },
    mounted() {
      // 模拟 ajax 请求，异步渲染编辑器
      setTimeout(() => {
        this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
      }, 1500)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}

</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>